<template>
	<view>
		<u-form v-if="inited" ref="formRef" labelPosition="left" :model="form" :rules="rules">
			<view class="title">任务信息</view>
			<view class="form_group">
				<z-input label="点位编码:" labelWidth="90" prop="code" :disabled="true" :readonly="true" :required="true"
					:value="form.code" @change="(val) => setVal('task', 'code', val)"></z-input>
				<z-input label="采样编码:" labelWidth="90" prop="soilSamplingCode" :disabled="true" :readonly="true"
					:required="true" :value="form.soilSamplingCode"
					@change="(val) => setVal('record', 'soilSamplingCode', val)"></z-input>
				<z-input-picker keyName="label" label="土壤类型:" labelWidth="90" prop="soilType" :disabled="!p2Edit"
					:list="soilTypeList" :required="true" :showPicker="showSoilTypePicker" :value="form.soilTypeName"
					@cancel="showSoilTypePicker = false" @confirm="setSoilType"
					@open="() => {if(p2Edit){ showSoilTypePicker = true }}"></z-input-picker>
				<z-input-picker keyName="label" label="土类名称:" labelWidth="90" prop="soilClass" :disabled="!p2Edit"
					:list="greaTypeList" :required="true" :showPicker="showGreaTypePicker" :value="form.soilClassName"
					@cancel="showGreaTypePicker = false" @confirm="setGreaType"
					@open="() => {if(p2Edit){ showGreaTypePicker = true }}"></z-input-picker>
				<template v-if="renderDropdown">
					<z-input-picker keyName="label" label="亚类名称:" labelWidth="90" prop="subClass" :disabled="!p2Edit"
						:list="subclassTypeList" :required="true" :showPicker="showSubclassTypePicker"
						:value="form.subClassName" @cancel="showSubclassTypePicker = false" @confirm="setSubclassType"
						@open="() => {if(p2Edit){ showSubclassTypePicker = true }}"></z-input-picker>
					<z-input-picker keyName="label" label="成土母质:" labelWidth="90" prop="soilMaterial" :disabled="!p2Edit"
						:list="chengtuTypeList" :required="true" :showPicker="showChengtuTypePicker"
						:value="form.soilMaterialName" @cancel="showChengtuTypePicker = false" @confirm="setChengtuType"
						@open="() => {if(p2Edit){ showChengtuTypePicker = true }}"></z-input-picker>
				</template>
				<z-input-picker keyName="label" label="保护策略:" labelWidth="90" prop="protectionStrategy"
					:disabled="!p2Edit" :list="protectionStrategyList" :required="false"
					:showPicker="showProtectionStrategyPicker" :value="form.protectionStrategyName"
					@cancel="showProtectionStrategyPicker = false" @confirm="setProtectionStrategy"
					@open="() => {if(p2Edit){ showProtectionStrategyPicker = true }}"></z-input-picker>
			</view>
			<view class="title">样品信息</view>
			<view class="form_group">
				<z-input-picker keyName="label" label="采样深度(cm):" labelWidth="120" prop="samplingDepth"
					:disabled="cantEdit" :list="depthList" :required="true" :showPicker="showDepthPicker"
					:value="form.samplingDepthName" @cancel="showDepthPicker = false" @confirm="setDepth"
					@open="() => {if(!cantEdit){ showDepthPicker = true }}"></z-input-picker>
				<z-input label="样品重量(kg):" labelWidth="120" prop="sampleWeight" :disabled="cantEdit"
					:readonly="cantEdit" :required="true" :value="form.sampleWeight"
					@change="(val) => setVal('record', 'sampleWeight', val)"></z-input>
			</view>
			<view class="title">照片信息</view>
			<view class="form_group upload-box" style="padding: 8px 4px 4px 4px;">
				<u-grid :border="false" col="4">
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude"
							:value="form.soilSamplingSceneImage" :remark="'cj_soilSamplingSceneImage'"
							@setVal="(val) => setVal('record', 'soilSamplingSceneImage', val)"></z-img-upload>
						<text class="z-upload-title">采样现场</text>
					</u-grid-item>
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude"
							:value="form.soilSamplePackageImage" :remark="'cj_soilSamplePackageImage'"
							@setVal="(val) => setVal('record', 'soilSamplePackageImage', val)"></z-img-upload>
						<text class="z-upload-title">样品包装</text>
					</u-grid-item>
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude"
							:value="form.soilBag2Label2Image" :remark="'cj_soilBag2Label2Image'"
							@setVal="(val) => setVal('record', 'soilBag2Label2Image', val)"></z-img-upload>
						<text class="z-upload-title">双袋双标签</text>
					</u-grid-item>
					<u-grid-item>
						<z-img-upload :disabled="cantEdit" :lat="taskInfo.wgs84Latitude" :lon="taskInfo.wgs84Longitude"
							:value="form.soilOtherImage" :remark="'cj_soilOtherImage'"
							@setVal="(val) => setVal('record', 'soilOtherImage', val)"></z-img-upload>
						<text class="z-upload-title">其他</text>
					</u-grid-item>
				</u-grid>
			</view>
		</u-form>
		<text style="font-size: 13px; color: red; margin-top: 30px; margin-left: 8px;">注:采样现场照片需带工具</text>
		<u-notify ref="notify"></u-notify>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import NotifyMix from '@/mixins/notify-fix.js'
	import Util from '@/utils/index.js'
	export default {
		mixins: [NotifyMix],
		data() {
			return {
				form: {
					protectionStrategy: "", // 保护策略
					protectionStrategyName: "",
					code: "",
					soilSamplingCode: "",
					soilType: '',
					soilTypeName: '',
					soilClass: '', //土类名称
					soilClassName: '',
					subClass: '', //亚类名称
					subClassName: '',
					soilMaterial: '', //成土母质
					soilMaterialName: '',
					samplingDepth: '',
					samplingDepthName: '',
					sampleWeight: '',
					soilSamplingSceneImage: '',
					soilSamplePackageImage: "",
					soilBag2Label2Image: '',
					soilOtherImage: '',
				},
				rules: {
					'soilType': {
						required: true,
						message: "请选择土壤类型",
						trigger: ['change'],
					},
					'samplingDepth': {
						required: true,
						message: "请选择采样深度",
						trigger: ['change'],
					},
					"sampleWeight": {
						required: true,
						message: "请输入样品重量",
						trigger: ['change'],
					},
				},
				showSoilTypePicker: false,
				showGreaTypePicker: false, //土类	
				showSubclassTypePicker: false, //亚类
				showChengtuTypePicker: false, //成土
				soilTypeList: [],
				greaTypeList: [], //土类	
				subclassTypeList: [], //亚类 
				chengtuTypeList: [], //成土
				showProtectionStrategyPicker: false,
				protectionStrategyList: [],
				showDepthPicker: false,
				depthList: [],
				inited: false,
				renderDropdown: false
			}
		},
		computed: {
			...mapState({
				action: state => state.cjRecord.action,
				taskInfo: state => state.cjRecord.taskInfo,
				recordInfo: state => state.cjRecord.recordInfo,
				isLT200m: state => state.cjRecord.isLT200m
			}),
			p1Edit() {
				return ['edit', 'add'].includes(this.action) && this.taskInfo.positionType === '1' && this.isLT200m
			},
			p2Edit() {
				return ['edit', 'add'].includes(this.action) && this.taskInfo.positionType === '2'
			},
			canEdit() {
				return this.p1Edit || this.p2Edit
			},
			cantEdit() {
				return !this.canEdit
			}
		},
		methods: {
			...mapMutations({
				setTaskInfoAttr: 'cjRecord/setTaskInfoAttr',
				setRecordInfoAttr: 'cjRecord/setRecordInfoAttr',
			}),
			setVal(target, key, val) {
				this.form[key] = val
				let d = {
					key,
					val
				}
				if (target === 'task') {
					this.setTaskInfoAttr(d)
				} else if (target === 'record') {
					this.setRecordInfoAttr(d)
				}
			},
			getTypeList(type ,key, val) {
				this.setTaskInfoAttr({
					key: key,
					val: val.value
				})
				return Util.DictUtil.getDict(type).filter(x => x.relateDictItemValue === val.value)
				
			},
			setSoilType(val) {
				this.form.soilType = val.value
				this.form.soilTypeName = val.label
				this.setTaskInfoAttr({
					key: 'soilType',
					val: val.value
				})
				this.showSoilTypePicker = false
			},

			//土类
			setGreaType(val) {
				console.log(val,'val')
				this.form.soilClass = val.value
				this.form.soilClassName = val.label
				this.setTaskInfoAttr({
					key: 'soilClass',
					val: val.value
				})
				this.showGreaTypePicker = false
				
				this.form.subClass = ''
				this.form.subClassName = ''
				this.setTaskInfoAttr({
					key: 'subClass',
					val: ''
				})
				this.subclassTypeList = []
				
				this.form.soilMaterial = ''
				this.form.soilMaterialName = ''
				this.setTaskInfoAttr({
					key: 'soilMaterial',
					val: ''
				})
				this.chengtuTypeList = []
				this.renderDropdown = false
				this.$nextTick(()=>{
					this.subclassTypeList = Util.DictUtil.getDict('cj_sub_class').filter(x => x.relateDictItemValue === val.value)
					this.chengtuTypeList = Util.DictUtil.getDict('cj_soil_material').filter(x => x.relateDictItemValue === val.value)
					this.renderDropdown = true
				})
			},
			//亚类
			setSubclassType(val) {
				this.form.subClass = val.value
				this.form.subClassName = val.label
				this.setTaskInfoAttr({
					key: 'subClass',
					val: val.value
				})
				this.showSubclassTypePicker = false
			},
			//成土
			setChengtuType(val) {
				this.form.soilMaterial = val.value
				this.form.soilMaterialName = val.label
				this.setTaskInfoAttr({
					key: 'soilMaterial',
					val: val.value
				})
				this.showChengtuTypePicker = false
			},
			setProtectionStrategy(val) {
				this.form.protectionStrategy = val.value
				this.form.protectionStrategyName = val.label
				this.setTaskInfoAttr({
					key: 'protectionStrategy',
					val: val.value
				})
				this.showProtectionStrategyPicker = false
			},
			setDepth(val) {
				this.form.samplingDepth = val.value
				this.form.samplingDepthName = val.label
				this.setRecordInfoAttr({
					key: 'samplingDepth',
					val: val.value
				})
				this.showDepthPicker = false
			},
			async checkForm() {
				try {
					await this.$refs.formRef.validate()
					return true
				} catch (e) {
					return false
				}
			}
		},
		mounted() {
			Util.ObjUtil.assign(this.taskInfo, this.form)
			Util.ObjUtil.assign(this.recordInfo, this.form)
			if (!Util.StringUtil.isEmpty(this.taskInfo.protectionStrategy)) {
				this.form.protectionStrategyName = Util.DictUtil.getLabel('cj_protection_strategy', this.taskInfo
					.protectionStrategy)
			}
			this.protectionStrategyList = Util.DictUtil.getDict('cj_protection_strategy')
			if (!Util.StringUtil.isEmpty(this.recordInfo.samplingDepth)) {
				this.form.samplingDepthName = Util.DictUtil.getLabel('cj_sampling_depth', this.recordInfo.samplingDepth)
			}
			this.depthList = Util.DictUtil.getDict('cj_sampling_depth')
			if (!Util.StringUtil.isEmpty(this.taskInfo.soilType)) {
				this.form.soilTypeName = Util.DictUtil.getLabel('cj_soil_type', this.taskInfo.soilType)
			}
			if (!Util.StringUtil.isEmpty(this.taskInfo.soilClass)) {
				this.form.soilClassName = Util.DictUtil.getLabel('cj_soil_class', this.taskInfo.soilClass)
			}
			if (!Util.StringUtil.isEmpty(this.taskInfo.subClass)) {
				this.form.subClassName = Util.DictUtil.getLabel('cj_sub_class', this.taskInfo.subClass)
			}
			if (!Util.StringUtil.isEmpty(this.taskInfo.soilMaterial)) {
				this.form.soilMaterialName = Util.DictUtil.getLabel('cj_soil_material', this.taskInfo.soilMaterial)
			}
			
			
			
			
			this.soilTypeList = Util.DictUtil.getDict('cj_soil_type')
			
			// cj_sub_class
			this.greaTypeList = Util.DictUtil.getDict('cj_soil_class')
			// this.subclassTypeList = Util.DictUtil.getDict('cj_sub_class')
			// this.chengtuTypeList = Util.DictUtil.getDict('cj_soil_type')
			this.inited = true
			this.renderDropdown = true
		}
	}
</script>

<style>
</style>